<template>
  <div class="form-box">
    <a-form-model class="form" layout="vertical" :model="form">
      <sectionTitle>基本详情</sectionTitle>
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="题目" required>
            <a-input v-model="form.title" placeholder="请输入题目" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="界别">
            <a-input disabled v-model="form.strSector" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="党派" required>
            <a-input disabled v-model="form.strFaction" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="联系地址" required>
            <a-input disabled v-model="form.address" placeholder="请输入标题" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="联系电话" required>
            <a-input disabled v-model="form.phone" placeholder="请输入标题" />
          </a-form-model-item>
        </a-col>
      </a-row>

      <sectionTitle>提案内容</sectionTitle>
      <a-textarea
        v-model="form.desc"
        placeholder="请输入提案内容"
        @input="descInput"
      />
      <div class="word clear">
        <span>剩余字数：{{ remnant }}</span>
        <span style="float: right; text-indent: 0em"
          ><a-button class="btn-sm">一键排版</a-button></span
        >
      </div>
      <div class="attachment">
        <h3><i class="suncnui suncnui-icon-fujian"></i>附件</h3>
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :multiple="true"
          :file-list="fileList"
          @change="handleChange"
        >
          <a-button class="upload-btn"> 选择文件 </a-button>
        </a-upload>
      </div>
      <sectionTitle>更多信息</sectionTitle>
      <a-form-model-item label="联名提案">
        <a-radio-group :options="plainOptions" v-model="form.lm" />
        <a-input
          addon-before="联名者"
          style="width: calc(100% - 220px); margin-left: 100px"
          v-show="form.lm === '1'"
          v-model="form.name"
        />
      </a-form-model-item>
      <a-form-model-item label="同意公开">
        <a-radio-group :options="plainOptions" v-model="form.isAgree" />
      </a-form-model-item>
      <a-form-model-item label="内容公开">
        <a-radio-group :options="plainOptions" v-model="form.isContent" />
      </a-form-model-item>
      <a-form-model-item label="经过调研">
        <a-radio-group :options="plainOptions" v-model="form.isSurvey" />
        <a-input
          addon-before="调研过程"
          style="width: calc(100% - 220px); margin-left: 100px"
          v-show="form.isSurvey === '1'"
          v-model="form.surveryProcess"
        />
      </a-form-model-item>
      <a-form-model-item label="第一次提出">
        <a-radio-group :options="plainOptions" v-model="form.isFirst" />
      </a-form-model-item>
      <a-form-model-item label="由本人撰写">
        <a-radio-group :options="plainOptions" v-model="form.isOwner" />
      </a-form-model-item>
      <a-form-model-item label="需要办理的协商方式">
        <a-checkbox-group :options="handleOptions" v-model="form.handleWay" />
      </a-form-model-item>
      <a-form-model-item label="建议的承办单位">
        <a-input v-model="form.cbOrg" placeholder="请输入建议承办的单位" />
      </a-form-model-item>
    </a-form-model>
    <div class="footer">
      <a-button type="primary" @click="onSubmit"> 提交 </a-button>
      <a-button style="margin-left: 10px" @click="$router.back()">
        暂存
      </a-button>
      <a-button style="margin-left: 10px" @click="$router.back()">
        返回
      </a-button>
    </div>
    <choice-modal :visible.sync="choiceVisible" />
  </div>
</template>
<script>
import sectionTitle from 'components/base/sectionTitle'
import choiceModal from 'components/base/choiceModal'
export default {
  data() {
    return {
      plainOptions: [
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ],
      handleOptions: [
        { label: '电话', value: '1' },
        { label: '面商', value: '2' },
        { label: '座谈', value: '3' },
        { label: '信函', value: '4' },
        { label: '其他', value: '5' },
        { label: '调研', value: '6' },
        { label: '网络', value: '7' }
      ],
      form: {
        title: '',
        strSector: '中国国民党革命委员会',
        strFaction: '中国共产党',
        address: '合肥巢湖经开区姥山路南段合肥职业技术学院',
        phone: '15216871142',
        desc: '',
        lm: '1',
        name:'',
        isAgree:'0',
        isContent:'0', 
        isSurvey:'0',
        surveryProcess:'',
        isFirst:'0',
        isOwner:'0',
        handleWay:[],
        cbOrg:'',
      },
      //文本域字数
      remnant: 1000,
      fileList: [
        {
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png'
        }
      ],
      choiceVisible: false
    }
  },
  components: { sectionTitle, choiceModal },
  methods: {
    onSubmit() {
      this.choiceVisible = true
      console.log('submit!', this.form)
    },
    handleChange(info) {
      let fileList = [...info.fileList]

      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2)

      // 2. read from response and show file link
      fileList = fileList.map((file) => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url
        }
        return file
      })

      this.fileList = fileList
    },
    //提案内容文本域输入事件
    descInput() {
      let lens = this.form.desc.length
      this.remnant = 1000 - lens
    }
  }
}
</script>
<style lang="less" scoped>
.form-box {
  position: relative;
  .form{
    padding-bottom: 86px
  }
}
.ant-input[disabled] {
  color: #333;
  border: 1px solid transparent;
}
textarea.ant-input {
  min-height: 500px;
  padding: 4px 10px;
  margin-bottom: 16px;
  font-size: 20px;
  &:focus,
  &:hover {
    border-color: #1075c6;
    box-shadow: none;
  }
}
textarea.ant-input::-webkit-input-placeholder {
  font-size: 20px;
}
.word {
  line-height: 1.5;
  font-size: 16px;
  span {
    display: inline-block;
    vertical-align: middle;
  }
  /deep/.ant-btn {
    border: 1px solid #c9c9c9;
    background-color: #fff;
    color: #555;
    border-radius: 100px;
    &:hover {
      border: 1px solid #1075c6;
      color: #1075c6;
      background: none;
    }
  }
}
.btn-sm {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  text-align: center;
}
.attachment {
  padding: 0px 0px 26px 0px;
  h3 {
    font-size: 14px;
    color: #555;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  i {
    font-weight: 400;
    margin-right: 10px;
  }
  .upload-btn {
    background: #1075c6;
    border: none;
    color: #fff;
  }
}
.footer {
  position: absolute;
  width: 100%;
  bottom: 0px;
  right: 0px;
  height: 86px;
  box-sizing: border-box;
  background: #fff;
  text-align: center;
  padding-top: 20px;
}
</style>